<template>
  <view class="heart-icon relative w-[50rpx] h-[50rpx]" id="heart" :ref="praiseRef" @click="praise">
    <image class="absolute top-0 left-0" src="@img/z0.png" mode="scaleToFill" />
    <image class="absolute top-0 left-0" src="@img/z2.png" mode="scaleToFill" />
    <image class="absolute top-0 left-0" src="@img/z3.png" mode="scaleToFill" />
    <image class="absolute top-0 left-0" src="@img/z4.png" mode="scaleToFill" />
    <image class="absolute top-0 left-0" src="@img/z5.png" mode="scaleToFill" />
    <image class="absolute top-0 left-0" src="@img/z6.png" mode="scaleToFill" />
  </view>
</template>
<script lang="ts" setup>
const praiseRef = ref(null)
const hearts = [1, 2, 3, 4, 5, 6]
const query = uni.createSelectorQuery()
const praise = () => {
  let heartIndex = 0
  for (const heart of hearts) {
    animateLeap(heartIndex++)
  }
  hearts.reverse()
}

function animateLeap(heartIndex) {
  // Remove class to restart animation
  // hearts[heartIndex].classList.remove('leap');
  // hearts[heartIndex].offsetWidth;

  setTimeout(
    () => {
      // hearts[heartIndex].classList.add('leap')
      // setTimeout(() => {
      //   hearts[heartIndex].style.zIndex = heartIndex
      //   hearts[heartIndex].style.strokeWidth = heartIndex / 4 + 'px'
      // }, 200) // 1/4 the time of the animation
    },
    5 * (heartIndex * 10),
  )
}
</script>
<style lang="scss" scoped>
.heart-icon image:nth-of-type(1) {
  z-index: 6;
}
.heart-icon image:nth-of-type(2) {
  z-index: 5;
}
.heart-icon image:nth-of-type(3) {
  z-index: 4;
}
.heart-icon image:nth-of-type(4) {
  z-index: 3;
}
.heart-icon image:nth-of-type(5) {
  z-index: 2;
}
.heart-icon image:nth-of-type(6) {
  z-index: 1;
}

.leap {
  transition-timing-function: cubic-bezier(0, 1, 1, 1);
  animation: leap 0.8s;
  animation-fill-mode: forwards;
}

@keyframes leap {
  50% {
    transform: translateY(-150px);
  }
  90% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
